<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="first-section">
				<view class="left">
					<text :class="info.icon"></text>
				</view>
				<view class="right">
					<view style="color:#333;font-size: 16px;font-weight: bold;">{{info.name}}详情</view>
					<view class="mt-20" style="font-size:12px;color:#666;">{{info.description}}</view>
				</view>
			</view>
			<view v-if="info.stats" class="section py-20">
				<view class="grid row-2">
					<view v-for="item in info.stats">
						<view style="font-size: 14px;color:#999;"> {{item.label}}</view>
						<view class="mt-10" style="color:#333;font-size: 16px;font-weight: bold;">{{item.value}}</view>
					</view>
				</view>
			</view>
			<view v-if="info.responsibilities" class="section py-20">
				<view class="section-title">核心职责</view>
				<view class="px-30">
					<view style="font-size: 14px;display: flex;align-items: center;margin:15rpx 0;"
						v-for="item in info.responsibilities">
						<text class="li-icon ri-check-fill mr-20"></text>{{item}}
					</view>
				</view>
			</view>
			<view v-if="info.unitTypes" class="section py-20">
				<view class="section-title">楼栋/巷道/组级单元类型</view>
				<view class="px-30">
					<view class="table">
						<!-- 表头 -->
						<view class="row header">
							<view class="cell">单元类型</view>
							<view class="cell">数量</view>
							<view class="cell">平均户数</view>
							<view class="cell">满意度</view>
						</view>
						<!-- 数据行 -->
						<view class="row" v-for="item in info.unitTypes">
							<view class="cell">{{item.type}}</view>
							<view class="cell">{{item.count}}</view>
							<view class="cell">{{item.avgHouseholds}}</view>
							<view class="cell" style="color:#21A753">{{item.satisfaction}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height:30rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		getGovernanceDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				pageLoading: false,
				info: {
					"level": "二级长",
					"type": "communityVillage",
					"id": null,
					"name": "社区/村级",
					"managers": "社区书记/村书记",
					"color": "indigo",
					"icon": "community-line",
					"gradient": "from-indigo-500 to-blue-500",
					"shortDescription": "1社区/32村",
					"description": "社区/村级是镇域管理的基础单元，由社区书记/主任或村书记/村长负责各自辖区内的治理和服务。",
					"stats": [{
							"label": "单元总数",
							"value": "1社区+32村"
						},
						{
							"label": "主要负责人",
							"value": "社区书记/村书记"
						},
						{
							"label": "网格总数",
							"value": "135个"
						},
						{
							"label": "平均人口",
							"value": "1,728人/社区村"
						}
					],
					"responsibilities": [
						"执行镇政府的政策决定",
						"负责社区/村级事务管理",
						"收集民意和社情民意",
						"协调解决居民/村民纠纷"
					],
					"events": null,
					"units": [{
							"name": "镇川社区",
							"type": "社区",
							"population": 12876,
							"leader": "张明",
							"score": 93,
							"gridCount": 24,
							"buildingCount": 68,
							"storeCount": 346,
							"groupCount": null,
							"centralHouseholds": null
						},
						{
							"name": "东湖村",
							"type": "村",
							"population": 2158,
							"leader": "李华",
							"score": 95,
							"gridCount": 5,
							"buildingCount": null,
							"storeCount": null,
							"groupCount": 8,
							"centralHouseholds": 38
						},
						{
							"name": "西湖村",
							"type": "村",
							"population": 1872,
							"leader": "王刚",
							"score": 91,
							"gridCount": 4,
							"buildingCount": null,
							"storeCount": null,
							"groupCount": 7,
							"centralHouseholds": 32
						},
						{
							"name": "南山村",
							"type": "村",
							"population": 1765,
							"leader": "赵阳",
							"score": 89,
							"gridCount": 4,
							"buildingCount": null,
							"storeCount": null,
							"groupCount": 6,
							"centralHouseholds": 29
						},
						{
							"name": "北山村",
							"type": "村",
							"population": 1693,
							"leader": "刘强",
							"score": 92,
							"gridCount": 4,
							"buildingCount": null,
							"storeCount": null,
							"groupCount": 6,
							"centralHouseholds": 27
						},
						{
							"name": "长安村",
							"type": "村",
							"population": 1820,
							"leader": "周伟",
							"score": 89,
							"gridCount": 4,
							"buildingCount": null,
							"storeCount": null,
							"groupCount": 7,
							"centralHouseholds": 33
						},
						{
							"name": "平安村",
							"type": "村",
							"population": 1698,
							"leader": "张建",
							"score": 90,
							"gridCount": 4,
							"buildingCount": null,
							"storeCount": null,
							"groupCount": 6,
							"centralHouseholds": 31
						},
						{
							"name": "其他26个村",
							"type": "村",
							"population": 32901,
							"leader": "多位",
							"score": 87,
							"gridCount": 86,
							"buildingCount": null,
							"storeCount": null,
							"groupCount": 128,
							"centralHouseholds": 655
						}
					],
					"gridComparison": null,
					"topGrids": null,
					"unitTypes": null,
					"unitTypesPerformance": null,
					"performanceScore": 91,
					"responseTime": 5.2,
					"responseTimeChange": -0.7
				},
				options: {},
			}
		},
		onLoad(options) {
			this.options = options;
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function() {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			getPageData(cb) {
				getGovernanceDetail(this.options.level).then(res => {
					this.info = res.layout;
					this.pageLoading = false;
					typeof cb == 'function' && cb();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
.tag{
	display: block;
	padding: 2px 8px;
	background-color: #DCFCE7;
	border-radius: 50em;
	color: #5FC483;
	font-size: 10px;
}
	.table {
		display: table;
		width: 100%;
		border:1rpx solid #eee;
		.row {
			display: table-row;
		
			border-bottom: 1rpx solid #eee;
			color:#333;
			font-size:12px;
		}
		.cell {
			display: table-cell;
			padding: 8px;
			text-align: center;
		
		}

		.header {
			background: #f8f8f8;
			font-weight: bold;
			color:#999;
			font-size:12px;
		}
	}

	.li-icon {
		width: 20px;
		height: 20px;
		color: #4076ED;
		background-color: #e5f1fe;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.first-section {
		display: flex;
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		padding: 40rpx 30rpx;
		background-color: white;
		border-radius: 10px;
		background-color: #e5f1fe;
		color: white;
		border: 1rpx solid #c4e0fe;

		.left {
			width: 50px;
			height: 50px;
			color: #4076ED;
			background-color: #DBEAFE;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.right {
			padding-left: 30rpx;
		}
	}

	.section {
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		background-color: white;
		border-radius: 10px;

		.section-title {
			font-size: 17px;
			font-weight: bold;
			padding: 20px;
		}

		.badge {
			display: inline-block;
			font-size: 12px;
			background-color: lightcoral;
			color: white;
			padding: 2px 8px;
			border-radius: 5px;
		}
	}

	.tabs {
		display: flex;
		flex-wrap: wrap;

		.tabs-item {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			padding: 10px 20px;
			border-bottom: 2px solid #eee;

			&.on {
				border-color: lightcoral;
			}
		}
	}

	.grid {
		display: flex;
		flex-wrap: wrap;

		&>view {
			width: calc(50% - 20px);
			margin: 10px;
			text-align: center;
		}

		&.row-2 {
			&>view {
				width: calc(50% - 20px);
			}
		}
	}

	.sub-title {
		display: flex;
		align-items: center;
		padding: 15px;

		.icon {
			width: 40px;
			height: 40px;
			border-radius: 40px;
			background-color: #eee;
			text-align: center;
			line-height: 40px;
		}

		.center {
			padding-left: 10px;
			flex-grow: 1;
		}

		.right {
			font-size: 12px;
			display: inline-block;
			padding: 2px 8px;
			border-radius: 5px;
			background-color: lightcyan;
			color: royalblue;
			border: 1rpx solid #eee;

		}
	}

	.village-list {
		margin: -5px;
	}

	.village-item {
		color: #666;
		margin: 5px;
		font-size: 12px;
		display: inline-block;
		padding: 2px 8px;
		border-radius: 5px;
		background-color: white;
		border: 1rpx solid #eee
	}

	.levels-item {
		padding: 10px 20px;
		display: flex;
		align-items: center;

		.left {
			flex-shrink: 0;
			background-color: lightsalmon;
			color: white;
			text-align: center;
			line-height: 40px;
			width: 40px;
			height: 40px;
		}

		.right {
			padding-left: 15px;
			flex-grow: 1;
		}
	}


	.tags {
		margin-left: -5px;
		margin-right: -5px;

		&>view {
			display: inline-block;
			padding: 4px 10px;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 50em;
			color: white;
			font-size: 12px;
			margin: 5px;

			&>text {
				margin-right: 5px;
			}
		}

	}
</style>